import React, { PureComponent } from "react"
import { withRouter } from "../hoc"

export class HomeSongMenu extends PureComponent {
    constructor() {
        super()
        this.state = {
            songMenus: [
                { id: "111", name: "歌曲1" },
                { id: "112", name: "歌曲2" },
                { id: "113", name: "歌曲3" },
            ],
        }
    }

    NavigateToDetail(id) {
        const { navigate } = this.props.router
        navigate("/detail/" + id)
    }

    

    render() {
        const { songMenus } = this.state
        return (
            <div>
                <h2>Home Song Menu</h2>
                <ul>
                    {songMenus.map((item) => {
                        return (
                            <li key={item.id} onClick={() => this.NavigateToDetail(item.id)}>
                                {item.name}
                            </li>
                        )
                    })}
                </ul>
            </div>
        )
    }
}

export default withRouter(HomeSongMenu)
